//验证手机验证码弹窗
import { useState, useEffect, useRef } from 'react';
import { Form, Button, Input, Alert, Select, message } from 'antd';
import CommonModal from '@/components/CommonModal';
import CommonLoading from '@/components/CommonLoading';
import { getCurrentUser } from '@/utils/authority';
import { unbindCardSendSms, unbindCard } from './service';

const layout = {
  labelCol: {
    span: 7,
  },
  wrapperCol: {
    span: 13,
  },
};

const UnbindCardMessage = ({ visible, cardItem, handleCancel, handleOk }) => {
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);
  const [countDown, setCount] = useState(0);

  const stageData = useRef({
    businessNo: undefined,
    otpOrderNo: undefined,
  });

  useEffect(() => {
    if (visible) {
      form.resetFields();
    }
  }, [visible]);

  useEffect(() => {
    if (countDown) {
      setTimeout(() => {
        setCount(countDown - 1);
      }, 1000);
    }
  }, [countDown]);

  //获取验证码
  const handleGetCode = async (val) => {
    setLoading(true);
    setCount(59);
    const { data, success } = await unbindCardSendSms({
      mobile: cardItem.mobile,
      unBindCardNo: cardItem.bankNo,
    });
    if (success) {
      message.success('验证码发送成功!');
      const { businessNo, otpOrderNo } = data || {};
      stageData.current = { businessNo, otpOrderNo };
    }
    setLoading(false);
  };

  //验证码提交
  const onOk = () => {
    form
      .validateFields()
      .then(async (val) => {
        setLoading(true);
        const { data, success, msg } = await unbindCard({
          ...stageData.current,
          mobile: cardItem.mobile,
          unBindCardNo: cardItem.bankNo,
          smsCode: val.smsCode,
        });
        if (success) {
          if (data) {
            handleOk();
            message.info(msg);
          }
        }
        setLoading(false);
      })
      .catch(() => {});
  };

  return (
    <CommonModal
      title="
      解除绑定"
      visible={visible}
      onOk={onOk}
      onCancel={handleCancel}
      footer={[
        <Button key="cancel" onClick={handleCancel}>
          取消
        </Button>,
        <Button key="ok" onClick={onOk} type="primary">
          确定
        </Button>,
      ]}
    >
      <p style={{ fontSize: '15px', padding: '6px 0 8px 16px' }}>
        是否确认解除绑定？
      </p>
      <Form name="get-phone-code" form={form} {...layout}>
        <Form.Item label="手机号">
          <div className="flex">
            <span>
              {/* {cardItem.mobile
                ? cardItem.mobile.replace(
                    cardItem.mobile.substring(3, 7),
                    '****'
                  )
                : ''} */}
              {cardItem.mobile ? cardItem.mobile : ''}
            </span>
            <Button
              style={{ marginLeft: 24 }}
              onClick={() => handleGetCode()}
              disabled={countDown}
            >
              获取验证码{countDown ? `(${countDown})` : ''}
            </Button>
          </div>
        </Form.Item>

        <Form.Item
          label="手机验证码"
          name="smsCode"
          rules={[{ required: true, message: '请输入手机验证码' }]}
        >
          <div className="flex">
            <Input />
          </div>
        </Form.Item>
      </Form>
      <CommonLoading loading={loading} />
    </CommonModal>
  );
};

export default UnbindCardMessage;
